<template>
    <div>
        <!-- 轮播图区域 -->
       <!-- 3. 在页面中使用轮播图组件 -->
       <swiper :lunbotuList="fatherLunbotuList" :isfull="true"></swiper>

        <!-- 九宫格改造为六宫格，用来显示不同的信息 -->
        <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
                    <img src="../../images/menu1.png">
                    <div class="mui-media-body">新闻资讯</div></router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
                    <img src="../../images/menu2.png">
                    <div class="mui-media-body">图片分享</div></router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodslist">
                    <img src="../../images/menu3.png">
                    <div class="mui-media-body">商品购买</div></router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/">
                    <img src="../../images/menu4.png">
                    <div class="mui-media-body">留言反馈</div></router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/">
                    <img src="../../images/menu5.png">
                    <div class="mui-media-body">视频专区</div></router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/">
                    <img src="../../images/menu6.png">
                    <div class="mui-media-body">联系我们</div></router-link></li>
            </ul> 
		</div>


    </div>
</template>

<script>
import { Toast } from 'mint-ui';
// 把轮播图抽离出去之后，我们需要导入轮播图组件来进行使用
// 1. 导入轮播图组件
import swiper from '../subcomponents/swiper.vue';
export default {
    data(){
        return {
            fatherLunbotuList:[//假的图片地址数组
                // {url:"",img:"src/images/ad1.webp"},
                // {url:"",img:"src/images/ad2.jpeg"},
                // {url:"",img:"src/images/ad3.webp"},
                {url:"",img:"//imgcps.jd.com/ling/6072622/5LyB5Lia6YeH6LSt/5pu05aSa5LyY5oOg54uC5qyi5LiN5q2i/t-5bd91884bcf6c7034d251e9d/5b44d353.jpg"},
                {url:"",img:"//img1.360buyimg.com/pop/s590x470_jfs/t1/38859/32/3414/55001/5cc50fd4E63bebbe0/4d7e0b7dbd2c7aec.jpg!q90!cc_590x470.webp"},
                {url:"",img:"//img1.360buyimg.com/pop/s590x470_jfs/t1/76778/34/2531/83499/5d0c3a97E60d46764/c183d22b06ae8939.jpg!q90!cc_590x470.webp"},
            ]//保存轮播图的数组
        }
    },
    created(){//组件一旦被创建，就直接调取轮播图
        this.getLunbotu()
    },
    methods:{
        getLunbotu(){//获取轮播图数据的方法
            /** 
             * 因为获取图片的地址接口有问题，所以我们使用了一个假的图片地址数组来代替
            */
            // this.$http.get("地址").then(result=>{
            //     // console.log(result.body);
            //     if (result.body.status===0) {
            //         this.lunbotuList = result.body.message;
            //     }else{
            //         Toast('加载轮播图失败！')
            //     }
            // });

        }
    },
    components:{
        swiper:swiper //在父组件上注册轮播图组件
    }
}
</script>


<style lang="scss" scoped>
// 轮播图相关的样式
// .mint-swipe {
//     height: 200px;
//     .mint-swipe-item {
//         &:nth-child(1){
//         background-color: red;
//         }
//         &:nth-child(2){
//         background-color: cyan;
//         }
//         &:nth-child(3){
//         background-color: palegreen;
//         }
//         img {
//         width: 100%;
//         height: 100%;
//         }
//     }
// }

.mui-grid-view.mui-grid-9 {
    background-color: #fff;
    border: none;
    img{
        width: 60px;
        height: 60px;
    }
    .mui-media-body{
        font-size: 13px;
    }
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border: none;
}
</style>

